<template>
  <div class="contact_main">
    <div class="contact_main2">
      <a href="javascript:" class="contact_bar"></a>
      <!-- todo -->
      <a-card hoverable style="width: 240px" :bordered="false">
        <template #cover>
          <img alt="微信公众号" :src="require('../assets/wechat.png')" />
        </template>
        <a-card-meta title="关注我吧！详细技术分享">
          <template #description>微信公众号</template>
        </a-card-meta>
      </a-card>
      <a-card hoverable style="width: 240px" :bordered="true">
        <template #cover>
          <img
            alt="微信小程序"
            :src="require('../assets/miniprogram_code.png')"
          />
        </template>
        <a-card-meta title="小程序！有意思的小工具">
          <template #description>微信小程序</template>
        </a-card-meta>
      </a-card>
    </div>
  </div>
</template>

<script>
// 局部引入jQuery
import $ from "jquery";
export default {
  name: "Contact",
  components: {},
  setup() {
    // todo
    $(function () {
      $(".contact_main").css("right", "-235px");

      var expanded = true;

      $(".contact_bar").click(function () {
        if (expanded) {
          $(".contact_main").animate({ right: "0px" }, 500);
          $(".contact_bar").css("background-position", "-25px 0px");
        } else {
          $(".contact_main").animate({ right: "-235px" }, 500);
          $(".contact_bar").css("background-position", "-0px 0px");
        }
        expanded = !expanded;
      });
    });

    return {
      // return context
    };
  },
};
</script>

<style scoped>
/* * {
  margin: 0;
  padding: 0;
  list-style: none;
} */

.contact_main {
  width: 235px;
  height: 310px;
  /* width: 520px;
  height: 620px; */
  position: fixed;
  bottom: 250px;
  border: 0px solid #ccc;
  z-index: 9999;
}
/* *html .contact_main {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop));
  margin-top: 640px;
} */
.contact_main2 {
  /* width: 240px;
  height: 200px; */
  width: 480px;
  height: 400px;
  position: relative;
  padding: 0px;
}
.contact_bar {
  width: 25px;
  height: 105px;
  /* width: 50px;
  height: 210px; */
  position: absolute;
  left: -24px;
  top: 0px;
  background: url(@/assets/contact_bg.png) no-repeat;
  display: block;
}
</style>